<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>Document</title>
   <link rel="stylesheet" href="index.css">
</head>
<body>
   <table>
      <tr>
         <th>Enter Loan Data:</th>
         <td></td>
         <th>Loan Balance, Cumulative Equity, and Interset Payments</th>
      </tr>
      <tr>
         <td>Amount of the loan ($):</td>
         <td>
            <input id="amount" onchange="calculate();">
         </td>
         <td rowspan="8">
            <canvas id="graph" width="400" height="250"></canvas>
         </td>
      </tr>
      <tr>
         <td>Anual interest (%):</td>
         <td>
            <input id="apr" onchange="calculate();">
         </td>
      </tr>
      <tr>
         <td>Repayment period (years):</td>
         <td>
            <input id="years" onchange="calculate();">
         </td>
      </tr>
      <tr>
         <td>Zipcode (to find lenders):</td>
         <td>
            <input id="zipcode" onchange="calculate();">
         </td>
      </tr>
      <tr>
         <th>Approximate Payments:</th>
         <td>
            <button onclick="calculate();">Calculate</button>
         </td>
      </tr>
      <tr>
         <td>Monthly payment:</td>
         <td>$<span class="output" id="payment"></span></td>
      </tr>
      <tr>
         <td>Total payment:</td>
         <td>$<span class="output" id="total"></span></td>
      </tr>
      <tr>
         <td>Total interest:</td>
         <td>$<span class="output" id="totalinterest"></span></td>
      </tr>
      <tr>
         <th>Sponsors:</th>
         <td colspan="2">
            Apply for your loan with one of these fine lenders:
            <div id="lenders"></div>
         </td>
      </tr>
   </table>
   <script src="index.js"></script>
</body>
</html>